<template>
  <!-- 菜品列表项容器 -->
  <div class="dish-list-item">
    <!-- 显示菜品 ID -->
    <span class="dish-id">{{ dish.dishId }}</span>
    <!-- 显示菜品名称 -->
    <span class="dish-name">{{ dish.dishName }}</span>
    <!-- 操作按钮区域 -->
    <div class="actions">
      <!-- 查看按钮，点击后导航到菜品详情页 -->
      <router-link 
        :to="{ name: 'dishDetail', params: { id: dish.dishId } }"
        class="btn btn-view"
      >
        查看
      </router-link>
      <!-- 删除按钮，点击后触发 delete 事件 -->
      <button @click="$emit('delete', dish.dishId)" class="btn btn-delete">
        删除
      </button>
    </div>
  </div>
</template>

<script setup>
// 定义组件接收的 props
defineProps({
  // 接收一个 dish 对象，该对象为必需项
  dish: {
    type: Object,
    required: true
  }
});
</script>

<style scoped>
/* 菜品列表项样式 */
.dish-list-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

/* 菜品 ID 样式 */
.dish-id {
  width: 60px;
  font-weight: bold;
}

/* 菜品名称样式 */
.dish-name {
  flex: 1;
  margin: 0 10px;
}

/* 操作按钮区域样式 */
.actions {
  display: flex;
  gap: 5px;
}

/* 通用按钮样式 */
.btn {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-size: 12px;
}

/* 查看按钮样式 */
.btn-view {
  background-color: #4CAF50;
  color: white;
}

/* 删除按钮样式 */
.btn-delete {
  background-color: #f44336;
  color: white;
}
</style>